<template>
    <div>
        <img class="user-poster"
             src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png">
        <van-row class="user-links">
            <van-col span="6">
                <div style="margin: auto; width: 36px">
                    <van-icon name="pending-payment" @click="$router.push('/order-list')" :info="ordersNum[0]"/>
                    全部
                </div>
            </van-col>
            <van-col span="6">
                <div style="margin: auto; width: 36px">
                    <van-icon name="pending-orders" @click="$router.push('/order-list?active=1')" :info="ordersNum[1]"/>
                    已付款
                </div>
            </van-col>
            <van-col span="6">
                <div style="margin: auto; width: 36px">
                    <van-icon name="pending-deliver" @click="$router.push('/order-list?active=2')"
                              :info="ordersNum[2]"/>
                    待付款
                </div>
            </van-col>
            <van-col span="6">
                <div style="margin: auto; width: 36px">
                    <van-icon name="logistics" @click="$router.push('/order-list?active=3')" :info="ordersNum[3]"/>
                    已确认
                </div>
            </van-col>
        </van-row>

        <van-cell-group class="user-group">
            <van-cell icon="records" title="全部订单" is-link @click="allOrder()"/>
        </van-cell-group>

        <van-cell-group>
            <van-cell icon="location" title="收货地址" is-link @click="$router.push('address')"/>
        </van-cell-group>

        <van-button size="large" class="tabbar-user__quit" @click="$router.push('/logout')">退出当前账户</van-button>
    </div>
</template>

<script>
  import bus from '../../bus'

  export default {
    data() {
      return {
        ordersNum: bus.state.ordersNum
      }
    },
    methods: {
      allOrder() {
        this.$router.push('order-list');
      }

    }
  }
</script>

<style lang="less" scoped>
    body {
        background: #fafafa;
    }

    .user {
        background: #eee;
        &-poster {
            width: 7.5rem;
            height: 4rem;
            display: block;
        }

        &-group {
            margin-bottom: .3rem;
        }

        &-links {
            padding: 15px 0;
            font-size: 12px;
            text-align: center;
            background-color: #fff;

            .van-icon {
                display: block;
                font-size: 24px;
            }
        }
    }

    .tabbar-user__quit {
        position: fixed;
        bottom: 60px;
    }
</style>
